<!--多底图展示审查要点-->
<template>
  <div class="box">
    <empty
      :emptyText="'材料未配置审查要点数据'"
      v-if="!cloneListData || cloneListData.length === 0"
    />
    <transition
      name="fade"
      mode="out-in"
      v-if="cloneListData && cloneListData.length > 0"
    >
      <mainPoint
        :baseImgUrl="showObj.baseImgUrl"
        :readOnly="true"
        :pointDataArray="showObj[examinePointListFieldName]"
        :key="key"
        style="width: 100%"
      ></mainPoint>
    </transition>

    <div class="pages" v-if="pagesBar.sumPages > 1">
      <div class="but-left bar" @click="prePage">
        <i class="el-icon-caret-left"></i>
      </div>
      <div>
        第<span>{{ pagesBar.pageNumber }}</span
        >页
      </div>
      <div style="margin: 0 2px"></div>
      <div>
        共<span>{{ pagesBar.sumPages }}</span
        >页
      </div>
      <div class="but-right bar" @click="nextPage">
        <i class="el-icon-caret-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
import MainPoint from "./mainPoint.vue";
import Empty from "@/views/common/empty.vue";
export default {
  components: {
    MainPoint,
    Empty,
  },

  props: {
    listData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //审查要点标记的数据字段名称
    examinePointListFieldName: {
      type: String,
      default: "pointDataArray",
    },
  },

  data() {
    return {
      cloneListData: this.listData,
      key: 0,
      showObj: {
        baseImgUrl: "",
      },

      pagesBar: {
        pageNumber: 1,
        sumPages: 1,
      },
    };
  },

  created() {
    this.initPages();
    this.tigger();
  },

  methods: {
    //初始化分页数据
    initPages() {
      this.pagesBar.sumPages = this.cloneListData.length;
    },

    //上一页
    prePage() {
      if (this.pagesBar.pageNumber === 1) {
        return false;
      }
      this.pagesBar.pageNumber -= 1;
      this.tigger();
    },
    //下一页
    nextPage() {
      if (this.pagesBar.pageNumber === this.pagesBar.sumPages) {
        return;
      }
      this.pagesBar.pageNumber += 1;
      this.tigger();
    },

    tigger() {
      if (this.cloneListData && this.cloneListData.length > 0) {
        this.showObj = this.cloneListData[this.pagesBar.pageNumber - 1];
        this.key = this.pagesBar.pageNumber;
      }
    },
  },
  watch: {
    listData: {
      immediate: true,
      handler(newArray, oldArray) {
        if (newArray && newArray.length > 0) {
          this.cloneListData = newArray;
          this.initPages();
          this.tigger();
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0.3;
}

.box {
  position: relative;
  width: 100%;

  .pages {
    align-items: center;
    display: flex;
    position: absolute;
    bottom: 10px;
    left: 25%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0.9;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 16px;

    .but-left {
      margin-right: 10px;
    }
    .but-right {
      margin-left: 10px;
    }
    .bar {
      cursor: pointer;
      font-size: 21px;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 5px;
      &:hover {
        background-color: rgba(0, 0, 0, 0.9);
      }
    }
    span {
      font-size: 16px;
      color: red;
      font-weight: 600;
      margin: 0 10px;
    }
  }
}
</style>